<blockquote class="layui-elem-quote">
    <div class="layui-inline">
        <button id="createButton" class="layui-btn layui-btn-small layui-btn-primary">
            <i class="layui-icon">&#xe608;</i>添加角色
        </button>
    </div>
    <div class="layui-inline">
        <button id="removeButton" class="layui-btn layui-btn-small layui-btn-primary">
            <i class="layui-icon">&#xe640;</i>批量删除
        </button>
    </div>
</blockquote>
<table id="roleTable" lay-filter="roleTable"></table>
<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-mini" lay-event="edit">信息</a>
    <a class="layui-btn layui-btn-mini" lay-event="edit-permission">权限</a>
</script>
<#include "/shared/style.ftl" />
<#include "/shared/javascript.ftl" />
<script type="text/javascript">
    var roleTable, element;
    var tableOption = layuiManager.getTableOption('roleTable', '#roleTable', '${baseUrlAdmin}/role/listAjax', [[
        {checkbox: true},
        {field: 'id', title: 'ID', width: 80, align: 'center'},
        {field: 'name', title: '角色名称', width: 100, align: 'center'},
        {field: 'remark', title: '备注', width: 200, align: 'center'},
        {field: 'userNumber', title: '用户数量', width: 150, align: 'center'},
        {field: 'grade', title: '等级', width: 100, align: 'center'},
        {field: 'sort', title: '排序', width: 150, align: 'center', edit: 'text'},
        {field: 'permission', title: '权限', width: 150, align: 'center'},
        {field: 'status', title: '状态', width: 100, align: 'center'},
        {field: 'createTime', title: '添加时间', width: 150, align: 'center'},
        {field: 'updateTime', title: '更新时间', width: 150, align: 'center'},
        {title: '操作', fixed: 'right', width: 200, align: 'center', toolbar: '#toolbar'}
    ]]);
    layui.use(['table', 'element'], function () {
        element = layui.element;
        roleTable = layui.table;
        roleTable.render(tableOption);
        //监听工具条
        roleTable.on('tool(roleTable)', function (object) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = object.data; //获得当前行数据
            var layEvent = object.event; //获得 lay-event 对应的值
            var tr = object.tr; //获得当前行 tr 的DOM对象
            var index = tr.data('index');
            var tds = tr.find('td');
            var roleId = tds.eq(1).text();
            if (layEvent === 'detail') { //查看
                console.log('查看 第' + index + '行');
                var titles = ['ID', '角色名称', '备注', '用户数量', '等级', '排序', '权限', '状态'];
                var ulNode = '<ul>';
                $.each(titles, function (index, item) {
                    ulNode += '<li>{0}:{1}</li>'.format(item, tds.eq(index + 1).text());
                });
                ulNode += '</ul>';
                parent.layuiLayer.open({title: '查看', content: ulNode, area: 'auto', maxWidth: 500});
            } else if (layEvent === 'del') { //删除
                parent.layuiLayer.confirm('真的删除行么', function (index) {
                    object.del();
                    layer.close(index);
                });
            } else if (layEvent === 'edit') { //修改用户信息
                layuiManager.parentCreateTab('${baseUrlAdmin}/role/edit?roleId={0}'.format(roleId), layuiTabConfig.roleEdit);
            } else if (layEvent === 'edit-permission') { //修改用户权限
                layuiManager.parentCreateTab('${baseUrlAdmin}/role/editPermission?roleId={0}'.format(roleId), layuiTabConfig.roleEditPermission);
            }
        });

    });

    $('#createButton').on('click', function (e) {
        layuiManager.parentCreateTab('${baseUrlAdmin}/role/add', layuiTabConfig.roleCreate);
    });

    $('#removeButton').on('click', function (e) {
        var checkStatus = roleTable.checkStatus('roleTable');
        if (checkStatus.data === undefined || checkStatus.data.length === 0) {
            parent.layuiLayer.alert('最低选中一行');
            return false;
        }
        var confirmMessage = checkStatus.isAll ? '确定要全部删除吗' : '确定要删除吗';
        parent.layuiLayer.confirm(confirmMessage, function (index) {
            var idArray = [];
            $.each(checkStatus.data, function (index, item) {
                idArray.push(item.id);
            });
            $.post('${baseUrlAdmin}/role/remove', {idArray: idArray.join(',')}, function (data) {
                if (typeof(data) === 'string') {
                    parent.layuiLayer.alert(data, '没有权限');
                    return false;
                }
                if (data.code === 0) {
                    roleTable.reload('roleTable', tableOption);
                } else {
                    parent.layuiLayer.alert(data.message);
                }
            });
            parent.layuiLayer.close(index);
        });
    });
</script>